<template>
  <div class="tableAuto">
    <el-table :data="tableData" style="width:100%" :height="height" @row-click="rowClick" border stripe
      :header-cell-style="{background:'#EAEBEC'}" :cell-style="statusStyle" v-loading="tableLoading" ref="refTable" highlight-current-row
      @sort-change='sortChange'>
      <el-table-column label="" width="35" align="center">
        <template slot-scope="scope">
          <div>
            <el-radio :label="scope.row.woId" v-model="radioId">&nbsp;</el-radio>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" :label="$t('common.number')" align="center" width="90">
        <template slot-scope="scope">
          {{table_index(scope.$index+1)}}
        </template>
      </el-table-column>
      <el-table-column prop="woId" min-width="90" show-overflow-tooltip :label="$t('workorder.work_order_number')"
        sortable='custom'></el-table-column>
      <el-table-column prop="lotNum" width="90" show-overflow-tooltip :label="$t('workorder.batch_number')"
        sortable='custom'></el-table-column>
      <el-table-column prop="poNum" width="90" show-overflow-tooltip :label="$t('workorder.order_number')"
        sortable='custom'></el-table-column>
      <el-table-column prop="recipeId" width="100" show-overflow-tooltip :label="$t('recipe.formula_name')" sortable='custom'>
        <template slot-scope="scope">
          {{scope.row.tbRecipeVo==null?'':scope.row.tbRecipeVo.recipeName}}
        </template>
      </el-table-column>
      <el-table-column prop="version" width="100" show-overflow-tooltip :label="$t('common.version')" sortable='custom'>
        <template slot-scope="scope">
          {{scope.row.tbRecipeVo==null?'':scope.row.tbRecipeVo.version}}
        </template>
      </el-table-column>
      <el-table-column prop="" width="100" show-overflow-tooltip :label="$t('recipe.material_code')" sortable='custom'>
        <template slot-scope="scope">
          {{scope.row.tbRecipeVo==null?'':scope.row.tbRecipeVo.item}}
        </template>
      </el-table-column>
      <el-table-column prop="notesNum" width="100" show-overflow-tooltip :label="$t('workorder.planned_quantity')" sortable='custom'>
        <template slot-scope="scope">
          {{scope.row.tbRecipeVo==null?'':scope.row.tbRecipeVo.itemQty}}
        </template>
      </el-table-column>
      <el-table-column prop="notesUom" width="75" show-overflow-tooltip :label="$t('basic.company')" sortable='custom'>
        <template slot-scope="scope">
          {{scope.row.tbRecipeVo==null?'':scope.row.tbRecipeVo.uomId}}
        </template>
      </el-table-column>
      <el-table-column prop="stateCd" width="80" show-overflow-tooltip :label="$t('recipe.state')" align="center" sortable='custom'>
        <template slot-scope="scope">
          <span :class="scope.row.stateCd == 1 ? 'bai' : ''">
            {{queryStatus(scope.row.stateCd)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="remind" width="120" show-overflow-tooltip :label="$t('workorder.time_out_reminder')" align="center"
        sortable='custom'>
        <template slot-scope="scope">
          {{scope.row.remind == 1 ? $t('third.plan_overdue') : ''}}
        </template>
      </el-table-column>
      <el-table-column prop="planStartTime" width="130" show-overflow-tooltip :label="$t('workorder.planned_start_time')" sortable='custom'>
        <template slot-scope="scope">
          {{scope.row.planStartTime}}
        </template>
      </el-table-column>
      <el-table-column prop="planEndTime" width="130" show-overflow-tooltip :label="$t('workorder.plan_end_time')" sortable='custom'>
        <template slot-scope="scope">
          {{scope.row.planEndTime}}
        </template>
      </el-table-column>
      <el-table-column prop="creatTimeLocal" width="130" show-overflow-tooltip :label="$t('common.create_time')" sortable='custom'>
        <template slot-scope="scope">
          <template>
            {{scope.row.creatTimeLocal}}
          </template>
        </template>
      </el-table-column>

      <el-table-column prop="releaseTimeLocal" width="120" show-overflow-tooltip :label="$t('workorder.issuing_time')"
        sortable='custom'></el-table-column>
      <el-table-column prop="reqFinishTimeLocal" width="120" show-overflow-tooltip :label="$t('workorder.end_time')"
        sortable='custom'></el-table-column>

    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      radioId: "",
      // height:document.body.offsetHeight - 400,
      height: 32 * 6.5,
    }
  },
  props: {
    tableData: Array,
    pager: Object,
    tableLoading: Boolean
  },
  methods: {
    rowClick (row) {
      this.radioId = row.woId;
      let obj = {
        row: row,
        radioId: this.radioId,
      }
      this.$emit("handleEdit", obj)
      this.$refs.refTable.setCurrentRow(row);
    },
    sortChange (column) {
      this.$emit('sortChange', column)
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
    statusStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 10) {
        if (this.tableData[rowIndex].stateCd == 0) { //新建/撤回
          return 'background:#00CC99'
        } else if (this.tableData[rowIndex].stateCd == 1) { //发布
          return 'background:#2E75B5'
        } else if (this.tableData[rowIndex].stateCd == 2) { //运行
          return 'background:#0AFF0A'
        } else if (this.tableData[rowIndex].stateCd == 3 || this.tableData[rowIndex].stateCd == 6) { //完成
          return 'background:#D8D8D8'
        } else if (this.tableData[rowIndex].stateCd == 4) { //暂停
          return 'background:#FF0000'
        } else if (this.tableData[rowIndex].stateCd == 5) { //废弃
          return 'background:#FFFF00'
        } else if (this.tableData[rowIndex].stateCd == 7) { //活动
          return 'background:none'
        } else if (this.tableData[rowIndex].stateCd == 8) { //批准
          return 'background:#9966FF'
        } else if (this.tableData[rowIndex].stateCd == 9) { //拒绝
          return 'background:#FF9900'
        }
      } else if (columnIndex == 10) {
        if (this.tableData[rowIndex].remind == 1) {
          return 'background:#FFFF00'
        }
      }
    },
    queryStatus (type) {
      switch (type) {
        case 0:
          return this.$t('workorder.newly_build')
        case 1:
          return this.$t('workorder.release')
        case 2:
          return this.$t('workorder.function')
        case 3:
        case 6:
          return this.$t('workorder.finish')
        case 4:
          return this.$t('workorder.suspend')
        case 5:
          return this.$t('common.abandoned')
        case 5:
          return this.$t('common.examine')
        case 8:
          return this.$t('common.approval')
        case 9:
          return this.$t('common.refuse')
      }
    }
  }
}
</script>
<style scoped>
.bai {
  color: #fff;
}
</style>